<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>三角洲行动代练</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        body {
            background-color: #f0f2f5;
        }
        .phone-frame {
            width: 375px;
            height: 812px;
            background: #000;
            border-radius: 40px;
            padding: 12px;
            box-shadow: 0 0 20px rgba(0,0,0,0.2);
            position: relative;
            overflow: hidden;
        }
        .phone-screen {
            width: 100%;
            height: 100%;
            background: white;
            border-radius: 32px;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            position: relative;
        }
        .content-area {
            flex: 1;
            overflow-y: auto;
            padding-bottom: 80px; /* 为底部导航栏留出空间 */
        }
        .content-area::-webkit-scrollbar {
            width: 4px;
        }
        .content-area::-webkit-scrollbar-track {
            background: #f1f5f9;
        }
        .content-area::-webkit-scrollbar-thumb {
            background: #94a3b8;
            border-radius: 2px;
        }
        .bottom-nav {
            height: 64px;
            background: white;
            border-top: 1px solid #e5e7eb;
            margin: 0 12px;
            border-radius: 0 0 32px 32px;
        }
    </style>
</head>
<body class="flex items-center justify-center min-h-screen">
    <div class="phone-frame">
        <div class="phone-screen">
            <!-- 状态栏 -->
            <div class="flex items-center justify-between h-7 px-4 bg-white select-none">
                <span class="text-xs font-medium text-black tracking-widest">10:50</span>
                <div class="flex items-center space-x-1">
                    <!-- 闹钟 -->
                    <svg class="w-4 h-4 text-black" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6.5 3.5L4 6m13.5-2.5L20 6M12 8v4l3 3m-3 7a8 8 0 100-16 8 8 0 000 16z"/></svg>
                    <span class="text-[10px] font-bold text-black">5.00</span>
                    <span class="text-[10px] text-black">KB/S</span>
                    <!-- WiFi -->
                    <svg class="w-4 h-4 text-black" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M2.05 7.05A16 16 0 0112 3c2.5 0 4.89.58 7.05 1.64M5.07 10.07A11 11 0 0112 7c2.21 0 4.3.6 6.07 1.64M8.11 13.11A6 6 0 0112 11a6 6 0 013.89 2.11M12 17h.01"/></svg>
                    <!-- 信号 -->
                    <svg class="w-4 h-4 text-black" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M2 20h.01M7 16v4m5-8v12m5-16v16"/></svg>
                    <!-- 5G -->
                    <span class="text-xs font-bold text-black ml-0.5">5G</span>
                    <!-- 电池 -->
                    <div class="flex items-center ml-1">
                        <div class="w-6 h-3 rounded-sm border border-black flex items-center relative">
                            <div class="bg-black h-2 rounded-l-sm" style="width:70%"></div>
                        </div>
                        <span class="text-xs font-bold text-black ml-1">78</span>
                    </div>
                </div>
            </div>
            <!-- 标题栏 -->
            <div class="flex items-center h-12 bg-white select-none border-b border-gray-100 px-4 relative">
                <div class="absolute left-0 right-0 flex justify-center items-center">
                    <span class="text-base font-medium text-black tracking-wide leading-none">发单</span>
                </div>
                <div class="flex-shrink-0 flex items-center ml-auto" style="min-width:90px;">
                    <div class="flex items-center bg-white rounded-full border border-gray-200 px-3 py-1 shadow-sm" style="height:36px;">
                        <span class="text-black text-lg font-bold px-1">···</span>
                        <div class="w-px h-5 bg-gray-200 mx-2"></div>
                        <div class="w-6 h-6 rounded-full border border-gray-300 flex items-center justify-center">
                            <svg class="w-4 h-4 text-black" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="6"/></svg>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 可滚动内容区域 -->
            <div class="content-area">
                <div class="p-4">
                    <!-- 发单信息 -->
                    <div class="bg-white rounded-xl p-4 shadow-sm mb-4">
                        <div class="flex items-center mb-4">
                            <i class="fas fa-plus text-yellow-400 mr-2"></i>
                            <span class="font-bold text-base">发单信息</span>
                            <!-- <a href="#" class="text-blue-500 text-xs ml-2">发单说明</a> -->
                            <!-- <a href="#" class="text-gray-400 text-xs ml-auto flex items-center"><i class="fas fa-info-circle mr-1"></i>发单标题规范</a> -->
                        </div>
                        <div class="divide-y divide-gray-100">
                            <div class="flex items-center justify-between py-3">
                                <div class="flex items-center">
                                    <span class="text-red-500 mr-1">*</span>
                                    <span class="text-gray-700">游戏</span>
                                </div>
                                <span class="text-gray-500">三角洲行动</span>
                            </div>
                            <!-- 区服行，确保id正确 -->
                            <div class="flex items-center justify-between py-3 cursor-pointer" id="server-row">
                                <div class="flex items-center">
                                    <span class="text-red-500 mr-1">*</span>
                                    <span class="text-gray-700">区服</span>
                                </div>
                                <span id="server-value" class="text-gray-400">请选择区服</span>
                            </div>
                            <!-- 订单类型选择行 -->
                            <div class="flex items-center justify-between py-3 cursor-pointer" id="order-type-row">
                                <div class="flex items-center">
                                    <span class="text-red-500 mr-1">*</span>
                                    <span class="text-gray-700">订单类型</span>
                                </div>
                                <span id="order-type-value" class="text-gray-400">请选择订单类型</span>
                            </div>
                            <div class="flex items-center justify-between py-3 cursor-pointer hidden" id="initial-rank-row">
                                <div class="flex items-center">
                                    <span class="text-red-500 mr-1">*</span>
                                    <span class="text-gray-700">初始段位</span>
                                </div>
                                <span id="initial-rank-value" class="text-gray-400">请选择初始段位</span>
                            </div>
                            <div class="flex items-center justify-between py-3 cursor-pointer hidden" id="target-rank-row">
                                <div class="flex items-center">
                                    <span class="text-red-500 mr-1">*</span>
                                    <span class="text-gray-700">目标段位</span>
                                </div>
                                <span id="target-rank-value" class="text-gray-400">请选择目标段位</span>
                            </div>
                            <!-- 订单标题输入行 -->
                            <div class="flex items-center justify-between py-3 cursor-pointer" id="order-title-row">
                                <div class="flex items-center">
                                    <span class="text-red-500 mr-1">*</span>
                                    <span class="text-gray-700">订单标题</span>
                                </div>
                                <span id="order-title-value" class="text-gray-400">请输入订单标题</span>
                            </div>
                            <div class="flex items-center justify-between py-3">
                                <div class="flex items-center">
                                    <span class="text-red-500 mr-1">*</span>
                                    <span class="text-gray-700">代练价格(元)</span>
                                </div>
                                <span class="text-gray-400">请输入代练价格</span>
                            </div>
                            <div class="flex items-center justify-between py-3">
                                <div class="flex items-center">
                                    <span class="text-red-500 mr-1">*</span>
                                    <span class="text-gray-700">要求时间(小时)</span>
                                </div>
                                <span class="text-gray-400">请输入要求时间</span>
                            </div>
                            <div class="flex items-center justify-between py-3">
                                <div class="flex items-center">
                                    <span class="text-red-500 mr-1">*</span>
                                    <span class="text-gray-700">安全保证金(元)</span>
                                    <i class="fas fa-question-circle text-gray-400 ml-2" id="safe-deposit-help"></i>
                                </div>
                                <span class="text-gray-400">请输入金额</span>
                            </div>
                            <div class="flex items-center justify-between py-3">
                                <div class="flex items-center">
                                    <span class="text-red-500 mr-1">*</span>
                                    <span class="text-gray-700">效率保证金(元)</span>
                                    <i class="fas fa-question-circle text-gray-400 ml-2" id="efficiency-deposit-help"></i>
                                </div>
                                <span class="text-gray-400">请输入金额</span>
                            </div>
                        </div>
                    </div>
                    <!-- 账号信息 -->
                    <div class="bg-white rounded-xl p-4 shadow-sm mb-4">
                        <div class="flex items-center mb-4">
                            <i class="fas fa-user-shield text-blue-400 mr-2"></i>
                            <span class="font-bold text-base">账号信息</span>
                            <span class="text-red-500 text-xs ml-2">*为必填项</span>
                            <span class="ml-auto text-blue-500 text-xs flex items-center"><i class="fas fa-lock mr-1"></i>账号登录</span>
                        </div>
                        <div class="text-xs text-gray-500 mb-2">打手上号时，需要您协助进行游戏登录验证，请确保您的通讯方式保持顺畅</div>
                        <div class="divide-y divide-gray-100">
                            <div class="flex items-center justify-between py-3">
                                <div class="flex items-center">
                                    <span class="text-red-500 mr-1">*</span>
                                    <span class="text-gray-700">游戏账号</span>
                                </div>
                                <span class="text-gray-400">请输入您的游戏账号</span>
                            </div>
                            <div class="flex items-center justify-between py-3">
                                <div class="flex items-center">
                                    <span class="text-red-500 mr-1">*</span>
                                    <span class="text-gray-700">游戏密码</span>
                                    <!-- <i class="fas fa-question-circle text-gray-400 ml-2"></i> -->
                                </div>
                                <span class="text-gray-400">请输入您的游戏密码</span>
                            </div>
                            <div class="flex items-center justify-between py-3">
                                <div class="flex items-center">
                                    <span class="text-red-500 mr-1">*</span>
                                    <span class="text-gray-700">游戏角色名</span>
                                </div>
                                <span class="text-gray-400">请输入您的游戏角色名称</span>
                            </div>
                            <div class="flex items-center justify-between py-3">
                                <div class="flex items-center">
                                    <span class="text-red-500 mr-1">*</span>
                                    <span class="text-gray-700">号主手机</span>
                                </div>
                                <span class="text-gray-400">请输入号主的手机号码</span>
                            </div>
                            <div class="flex items-center justify-between py-3">
                                <span class="text-gray-700">特别说明</span>
                                <span class="text-gray-400">请输入特别说明，100字内</span>
                            </div>
                        </div>
                        <div class="text-xs text-gray-400 mt-2">此处仅填写账号信息相关内容，填写（指定英雄、排位、巅峰赛、战力等）的额外代练要求请联系客服介入不予采纳！
                        </div>
                    </div>
                </div>
            </div>
            <!-- 订单价格和确认按钮 -->
            <div class="bg-white border-t border-gray-200 px-4 py-3">
                <div class="flex items-center justify-between">
                    <span class="text-2xl font-bold text-red-500">¥0</span>
                    <button class="bg-blue-500 text-white px-6 py-2 rounded-full text-sm font-medium hover:bg-blue-600 transition-colors">
                        确认发单
                    </button>
                </div>
            </div>
            <!-- 遮罩层和选择区服弹窗，必须在.phone-screen内部，底部导航栏之前 -->
            <div id="server-modal-mask" class="absolute inset-0 bg-black bg-opacity-30 z-40 hidden"></div>
            <div id="server-modal"
                 class="absolute left-0 right-0 bottom-0 z-50 flex flex-col transition-transform duration-300 translate-y-full"
                 style="width: 100%; border-radius: 24px 24px 0 0; background: #fff; box-shadow: 0 -2px 16px rgba(0,0,0,0.08); max-height: calc(100% - 64px); overflow: hidden;">
                <!-- 操作栏 -->
                <div class="flex items-center justify-between px-6 pt-4 pb-2 border-b">
                    <button id="server-cancel" class="text-gray-400 text-base">取消</button>
                    <span class="font-bold text-lg">选择区服</span>
                    <button id="server-confirm" class="text-blue-500 text-base">确认</button>
                </div>
                <!-- 联动选择区 -->
                <div class="flex flex-1 overflow-hidden">
                    <!-- 区列表 -->
                    <div id="zone-list" class="flex-1 overflow-y-auto border-r">
                        <div class="zone-item px-6 py-4 text-center text-base cursor-pointer text-blue-500 font-bold bg-gray-50" data-zone="安卓-QQ">安卓-QQ</div>
                        <div class="zone-item px-6 py-4 text-center text-base cursor-pointer text-gray-700" data-zone="安卓-微信">安卓-微信</div>
                        <div class="zone-item px-6 py-4 text-center text-base cursor-pointer text-gray-700" data-zone="苹果-QQ">苹果-QQ</div>
                        <div class="zone-item px-6 py-4 text-center text-base cursor-pointer text-gray-700" data-zone="苹果-微信">苹果-微信</div>
                        <div class="zone-item px-6 py-4 text-center text-base cursor-pointer text-gray-700" data-zone="PC端">PC端</div>
                    </div>
                    <!-- 服列表 -->
                    <div id="server-list" class="flex-1 overflow-y-auto">
                        <div class="server-item px-6 py-4 text-center text-base cursor-pointer text-blue-500 font-bold bg-gray-50" data-server="默认服">默认服</div>
                    </div>
                </div>
            </div>
            <!-- 订单类型弹窗遮罩层 -->
            <div id="order-type-modal-mask" class="absolute inset-0 bg-black bg-opacity-30 z-40 hidden"></div>
            <!-- 选择订单类型弹窗 -->
            <div id="order-type-modal"
                 class="absolute left-0 right-0 bottom-0 z-50 flex flex-col transition-transform duration-300 translate-y-full"
                 style="width: 100%; border-radius: 24px 24px 0 0; background: #fff; box-shadow: 0 -2px 16px rgba(0,0,0,0.08); max-height: 240px; overflow: hidden;">
                <!-- 操作栏 -->
                <div class="flex items-center justify-between px-6 pt-4 pb-2 border-b">
                    <button id="order-type-cancel" class="text-gray-400 text-base">取消</button>
                    <span class="font-bold text-lg">选择订单类型</span>
                    <button id="order-type-confirm" class="text-blue-500 text-base">确认</button>
                </div>
                <!-- 单列订单类型列表 -->
                <div id="order-type-list" class="flex-1 overflow-y-auto divide-y">
                    <!-- JS渲染 -->
                </div>
            </div>
            <!-- 段位选择弹窗遮罩层 -->
            <div id="rank-modal-mask" class="absolute inset-0 bg-black bg-opacity-30 z-40 hidden"></div>
            <!-- 段位选择弹窗 -->
            <div id="rank-modal"
                 class="absolute left-0 right-0 bottom-0 z-50 flex flex-col transition-transform duration-300 translate-y-full"
                 style="width: 100%; border-radius: 24px 24px 0 0; background: #fff; box-shadow: 0 -2px 16px rgba(0,0,0,0.08); max-height: 240px; overflow: hidden;">
                <!-- 操作栏 -->
                <div class="flex items-center justify-between px-6 pt-4 pb-2 border-b">
                    <button id="rank-cancel" class="text-gray-400 text-base">取消</button>
                    <span class="font-bold text-lg">选择段位</span>
                    <button id="rank-confirm" class="text-blue-500 text-base">确认</button>
                </div>
                <!-- 段位选择区域 -->
                <div class="flex flex-1 overflow-hidden">
                    <!-- 大段位列表 -->
                    <div id="major-rank-list" class="flex-1 overflow-y-auto border-r">
                        <div class="major-rank-item px-6 py-4 text-center text-base cursor-pointer text-blue-500 font-bold bg-gray-50" data-rank="青铜">青铜</div>
                        <div class="major-rank-item px-6 py-4 text-center text-base cursor-pointer text-gray-700" data-rank="白银">白银</div>
                        <div class="major-rank-item px-6 py-4 text-center text-base cursor-pointer text-gray-700" data-rank="黄金">黄金</div>
                        <div class="major-rank-item px-6 py-4 text-center text-base cursor-pointer text-gray-700" data-rank="铂金">铂金</div>
                        <div class="major-rank-item px-6 py-4 text-center text-base cursor-pointer text-gray-700" data-rank="钻石">钻石</div>
                        <div class="major-rank-item px-6 py-4 text-center text-base cursor-pointer text-gray-700" data-rank="黑鹰">黑鹰</div>
                        <div class="major-rank-item px-6 py-4 text-center text-base cursor-pointer text-gray-700" data-rank="三角洲巅峰">三角洲巅峰</div>
                    </div>
                    <!-- 小段位列表 -->
                    <div id="minor-rank-list" class="flex-1 overflow-y-auto">
                        <div class="minor-rank-item px-6 py-4 text-center text-base cursor-pointer text-blue-500 font-bold bg-gray-50" data-rank="Ⅲ">Ⅲ</div>
                        <div class="minor-rank-item px-6 py-4 text-center text-base cursor-pointer text-gray-700" data-rank="Ⅱ">Ⅱ</div>
                        <div class="minor-rank-item px-6 py-4 text-center text-base cursor-pointer text-gray-700" data-rank="Ⅰ">Ⅰ</div>
                    </div>
                </div>
            </div>
            <!-- 输入订单标题弹窗遮罩层 -->
            <div id="order-title-modal-mask" class="absolute inset-0 bg-black bg-opacity-30 z-50 hidden"></div>
            <!-- 输入订单标题弹窗 -->
            <div id="order-title-modal"
                 class="absolute left-1/2 top-1/2 z-50 flex flex-col transition-transform duration-300 scale-0 hidden"
                 style="width: 320px; max-width: 92vw; border-radius: 20px; background: #fff; box-shadow: 0 4px 24px rgba(0,0,0,0.12); transform: translate(-50%, -50%);">
                <!-- 标题栏 -->
                <div class="text-center font-bold text-lg py-4 border-b">输入订单标题</div>
                <!-- 多行文本框 -->
                <div class="p-4">
                    <textarea id="order-title-textarea" rows="4" maxlength="100" class="w-full border rounded-lg p-3 text-base resize-none focus:outline-none focus:border-blue-400" placeholder="请输入订单标题，最多100字"></textarea>
                    <div class="flex justify-end text-xs text-gray-400 mt-1"><span id="order-title-count">0</span>/100</div>
                </div>
                <!-- 底部操作栏 -->
                <div class="flex justify-between items-center px-4 pb-4">
                    <button id="order-title-cancel" class="text-gray-400 text-base">取消</button>
                    <button id="order-title-confirm" class="bg-blue-500 text-white px-6 py-2 rounded-full text-base font-bold disabled:bg-gray-300 disabled:text-gray-400">确定</button>
                </div>
            </div>
            <!-- 安全保证金说明弹窗遮罩层 -->
            <div id="safe-deposit-modal-mask" class="absolute inset-0 bg-black bg-opacity-30 z-50 hidden"></div>
            <!-- 安全保证金说明弹窗 -->
            <div id="safe-deposit-modal"
                 class="absolute left-1/2 top-1/2 z-50 flex flex-col transition-transform duration-300 scale-0 hidden"
                 style="width: 320px; max-width: 92vw; border-radius: 20px; background: #fff; box-shadow: 0 4px 24px rgba(0,0,0,0.12); transform: translate(-50%, -50%);">
                <!-- 标题栏 -->
                <div class="text-center font-bold text-lg py-4 border-b">什么是安全保证金？</div>
                <!-- 说明文本 -->
                <div class="px-5 py-4 text-gray-700 text-base leading-relaxed text-left" style="white-space: pre-line;">
安全保证金是指对上家游戏账号安全进行保障时下家所需预支付的保证形式的费用。当在代练过程中出现账号安全问题，即以双方协商或客服介入部分或全部金额赔付给上家。（安全问题包括游戏内虚拟道具的安全，例如：符文、角色经验、胜点、负场经下家代练后不增反减，私自与号主联系，下家使用第三方软件带来的风险。）
                </div>
                <!-- 底部操作栏 -->
                <div class="flex justify-end items-center px-5 pb-4">
                    <button id="safe-deposit-confirm" class="bg-blue-500 text-white px-6 py-2 rounded-full text-base font-bold">确定</button>
                </div>
            </div>
            <!-- 效率保证金说明弹窗遮罩层 -->
            <div id="efficiency-deposit-modal-mask" class="absolute inset-0 bg-black bg-opacity-30 z-50 hidden"></div>
            <!-- 效率保证金说明弹窗 -->
            <div id="efficiency-deposit-modal"
                 class="absolute left-1/2 top-1/2 z-50 flex flex-col transition-transform duration-300 scale-0 hidden"
                 style="width: 320px; max-width: 92vw; border-radius: 20px; background: #fff; box-shadow: 0 4px 24px rgba(0,0,0,0.12); transform: translate(-50%, -50%);">
                <!-- 标题栏 -->
                <div class="text-center font-bold text-lg py-4 border-b">什么是效率保证金？</div>
                <!-- 说明文本 -->
                <div class="px-5 py-4 text-gray-700 text-base leading-relaxed text-left" style="white-space: pre-line;">
效率保证金是指对上家的代练要求进行效率保障时下家所需预支持的保证形式的费用，当下家未在规定时间内完成代练要求，即以双方协商或客服介入的部分或全部金额赔付给上家。
（代练要求包括：下家在规定时间内没有完成上家的代练要求，接单4小时内没有上号，代练时间过四分之一但代练进度未达六分之一，下家原因退单，下家未及时上传代练截图。）
                </div>
                <!-- 底部操作栏 -->
                <div class="flex justify-end items-center px-5 pb-4">
                    <button id="efficiency-deposit-confirm" class="bg-blue-500 text-white px-6 py-2 rounded-full text-base font-bold">确定</button>
                </div>
            </div>
            <!-- 发单提醒弹窗遮罩层 -->
            <div id="order-alert-mask" class="absolute inset-0 bg-black bg-opacity-30 z-50 hidden"></div>
            <!-- 发单提醒弹窗 -->
            <div id="order-alert-modal"
                 class="absolute left-1/2 top-1/2 z-50 flex flex-col transition-transform duration-300 scale-0 hidden"
                 style="width: 340px; max-width: 92vw; border-radius: 20px; background: #fff; box-shadow: 0 4px 24px rgba(0,0,0,0.12); transform: translate(-50%, -50%);">
                <div class="flex items-center px-6 pt-6 pb-1">
                    <span class="text-blue-500 font-bold text-xl">发单提醒</span>
                </div>
                <div class="px-6 pt-1 pb-2 text-gray-700 text-base leading-relaxed text-left" style="white-space: pre-line;">
· 关注订单消息，及时对订单异常问题进行处理。
· 请留意订单状态，接单者提交验收后，根据打手等级，系统将在3-96小时内对订单自动验收。
· 订单完结后及时顶号更改密码，避免造成不必要的损失。
· 不要给打手提供趣代练登录验证码和腾讯人脸识别验证码。
                </div>
                <div class="flex items-center px-6 py-2">
                    <input type="checkbox" id="order-alert-check" class="form-checkbox w-5 h-5 accent-blue-500 checked:bg-blue-500 checked:border-blue-500 border-blue-400 focus:ring-blue-500 rounded" checked>
                    <label for="order-alert-check" class="ml-2 text-gray-700 text-sm">
                        我已阅读并同意
                        <a href="#" class="text-blue-500 underline">《趣代练发单协议》</a>
                    </label>
                </div>
                <div class="flex justify-between items-center px-6 pb-6 pt-2">
                    <button id="order-alert-cancel" class="w-28 h-10 rounded-full border border-gray-300 text-gray-700 bg-white text-base font-bold">取消</button>
                    <button id="order-alert-confirm" class="w-28 h-10 rounded-full bg-gradient-to-r from-blue-400 to-blue-500 text-white text-base font-bold">确定</button>
                </div>
            </div>
            <!-- 底部导航栏 -->
            <div class="bottom-nav flex items-center justify-around">
                <button class="flex flex-col items-center text-blue-500">
                    <i class="fas fa-plus-circle text-xl"></i>
                    <span class="text-xs mt-1">发单</span>
                </button>
                <button class="flex flex-col items-center text-gray-400">
                    <i class="fas fa-handshake text-xl"></i>
                    <span class="text-xs mt-1">接单</span>
                </button>
                <button class="flex flex-col items-center text-gray-400">
                    <i class="fas fa-clipboard-list text-xl"></i>
                    <span class="text-xs mt-1">订单</span>
                </button>
                <button class="flex flex-col items-center text-gray-400">
                    <i class="fas fa-user text-xl"></i>
                    <span class="text-xs mt-1">我的</span>
                </button>
            </div>
            <!-- 发单成功页面（默认隐藏，发单成功后显示） -->
            <div id="order-success-page" class="absolute inset-0 z-50 flex flex-col items-center justify-center bg-white rounded-2xl px-6 py-10 hidden">
                <!-- 成功icon -->
                <div class="flex items-center justify-center w-20 h-20 rounded-full bg-blue-500 mb-6">
                    <svg class="w-12 h-12 text-white" fill="none" stroke="currentColor" stroke-width="3" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                    </svg>
                </div>
                <!-- 标题 -->
                <div class="text-2xl font-bold text-blue-600 mb-2">发单成功！</div>
                <!-- 说明 -->
                <div class="text-gray-500 text-base mb-6 text-center leading-relaxed">
                    请耐心等待代练师接单<br>
                    你可以在 <span class="font-semibold text-blue-500">【订单】</span> 页中跟踪订单进度
                </div>
                <!-- 按钮 -->
                <div class="flex w-full gap-4">
                    <button onclick="goToSendOrder()" class="flex-1 h-12 rounded-full border border-gray-300 text-gray-700 bg-white font-bold text-base">返回发单页</button>
                    <button onclick="goToOrderPage()" class="flex-1 h-12 rounded-full bg-gradient-to-r from-blue-400 to-blue-500 text-white font-bold text-base">去订单页</button>
                </div>
            </div>
        </div>
    </div>
    <script>
    document.addEventListener('DOMContentLoaded', function() {
        const zones = ["安卓-QQ", "安卓-微信", "苹果-QQ", "苹果-微信", "PC端"];
        const servers = { "安卓-QQ": ["默认服"], "安卓-微信": ["默认服"], "苹果-QQ": ["默认服"], "苹果-微信": ["默认服"], "PC端": ["默认服"] };
        let selectedZone = "安卓-QQ";
        let selectedServer = "默认服";
        // 打开弹窗
        function openServerModal() {
            document.getElementById('server-modal').classList.remove('translate-y-full');
            document.getElementById('server-modal-mask').classList.remove('hidden');
            renderZoneList();
            renderServerList();
        }
        // 关闭弹窗
        function closeServerModal() {
            document.getElementById('server-modal').classList.add('translate-y-full');
            document.getElementById('server-modal-mask').classList.add('hidden');
        }
        // 渲染区列表
        function renderZoneList() {
            const zoneList = document.getElementById('zone-list');
            zoneList.innerHTML = '';
            zones.forEach(zone => {
                const div = document.createElement('div');
                div.className = 'zone-item px-6 py-4 text-center text-base cursor-pointer';
                if(zone === selectedZone) {
                    div.classList.add('text-blue-500', 'font-bold', 'bg-gray-50');
                } else {
                    div.classList.add('text-gray-700');
                }
                div.dataset.zone = zone;
                div.innerText = zone;
                div.onclick = () => {
                    selectedZone = zone;
                    selectedServer = servers[zone][0];
                    renderZoneList();
                    renderServerList();
                };
                zoneList.appendChild(div);
            });
        }
        // 渲染服列表
        function renderServerList() {
            const serverList = document.getElementById('server-list');
            serverList.innerHTML = '';
            servers[selectedZone].forEach(server => {
                const div = document.createElement('div');
                div.className = 'server-item px-6 py-4 text-center text-base cursor-pointer';
                if(server === selectedServer) {
                    div.classList.add('text-blue-500', 'font-bold', 'bg-gray-50');
                } else {
                    div.classList.add('text-gray-700');
                }
                div.dataset.server = server;
                div.innerText = server;
                div.onclick = () => {
                    selectedServer = server;
                    renderServerList();
                };
                serverList.appendChild(div);
            });
        }
        // 事件绑定
        document.getElementById('server-cancel').onclick = closeServerModal;
        document.getElementById('server-modal-mask').onclick = closeServerModal;
        document.getElementById('server-confirm').onclick = function() {
            document.getElementById('server-value').innerText = selectedZone + ' - ' + selectedServer;
            document.getElementById('server-value').classList.remove('text-gray-400');
            document.getElementById('server-value').classList.add('text-gray-700');
            closeServerModal();
        }
        document.getElementById('server-row').onclick = openServerModal;

        // 订单类型弹窗逻辑
        const orderTypes = ["排位", "陪练", "其他"];
        let selectedOrderType = orderTypes[0];
        function renderOrderTypeList() {
            const list = document.getElementById('order-type-list');
            list.innerHTML = '';
            orderTypes.forEach(type => {
                const div = document.createElement('div');
                div.className = 'px-6 py-4 text-center text-base cursor-pointer';
                if(type === selectedOrderType) {
                    div.classList.add('text-blue-500', 'font-bold', 'bg-gray-50');
                } else {
                    div.classList.add('text-gray-700');
                }
                div.innerText = type;
                div.onclick = () => {
                    selectedOrderType = type;
                    renderOrderTypeList();
                };
                list.appendChild(div);
            });
        }
        function openOrderTypeModal() {
            document.getElementById('order-type-modal').classList.remove('translate-y-full');
            document.getElementById('order-type-modal-mask').classList.remove('hidden');
            renderOrderTypeList();
        }
        function closeOrderTypeModal() {
            document.getElementById('order-type-modal').classList.add('translate-y-full');
            document.getElementById('order-type-modal-mask').classList.add('hidden');
        }
        document.getElementById('order-type-cancel').onclick = closeOrderTypeModal;
        document.getElementById('order-type-modal-mask').onclick = closeOrderTypeModal;
        document.getElementById('order-type-confirm').onclick = function() {
            document.getElementById('order-type-value').innerText = selectedOrderType;
            document.getElementById('order-type-value').classList.remove('text-gray-400');
            document.getElementById('order-type-value').classList.add('text-gray-700');
            if (selectedOrderType === "排位") {
                document.getElementById('initial-rank-row').classList.remove('hidden');
                document.getElementById('target-rank-row').classList.remove('hidden');
            } else {
                document.getElementById('initial-rank-row').classList.add('hidden');
                document.getElementById('target-rank-row').classList.add('hidden');
            }
            closeOrderTypeModal();
        }
        document.getElementById('order-type-row').onclick = openOrderTypeModal;

        // 段位选择弹窗逻辑
        const majorRanks = ["青铜", "白银", "黄金", "铂金", "钻石", "黑鹰", "三角洲巅峰"];
        const minorRanks = {
            "青铜": ["Ⅲ", "Ⅱ", "Ⅰ"],
            "白银": ["Ⅲ", "Ⅱ", "Ⅰ"],
            "黄金": ["Ⅳ", "Ⅲ", "Ⅱ", "Ⅰ"],
            "铂金": ["Ⅳ", "Ⅲ", "Ⅱ", "Ⅰ"],
            "钻石": ["Ⅴ", "Ⅳ", "Ⅲ", "Ⅱ", "Ⅰ"],
            "黑鹰": ["Ⅴ", "Ⅳ", "Ⅲ", "Ⅱ", "Ⅰ"],
            "三角洲巅峰": []
        };
        let selectedMajorRank = "青铜";
        let selectedMinorRank = "Ⅲ";
        let currentRankRow = null; // 当前点击的是初始段位还是目标段位

        function renderMajorRankList() {
            const list = document.getElementById('major-rank-list');
            list.innerHTML = '';
            majorRanks.forEach(rank => {
                const div = document.createElement('div');
                div.className = 'major-rank-item px-6 py-4 text-center text-base cursor-pointer';
                if(rank === selectedMajorRank) {
                    div.classList.add('text-blue-500', 'font-bold', 'bg-gray-50');
                } else {
                    div.classList.add('text-gray-700');
                }
                div.dataset.rank = rank;
                div.innerText = rank;
                div.onclick = () => {
                    selectedMajorRank = rank;
                    selectedMinorRank = minorRanks[rank][0] || '';
                    renderMajorRankList();
                    renderMinorRankList();
                };
                list.appendChild(div);
            });
        }

        function renderMinorRankList() {
            const list = document.getElementById('minor-rank-list');
            list.innerHTML = '';
            const minors = minorRanks[selectedMajorRank];
            if(minors.length === 0) {
                const div = document.createElement('div');
                div.className = 'px-6 py-4 text-center text-base text-gray-400';
                div.innerText = '无小段位';
                list.appendChild(div);
            } else {
                minors.forEach(rank => {
                    const div = document.createElement('div');
                    div.className = 'minor-rank-item px-6 py-4 text-center text-base cursor-pointer';
                    if(rank === selectedMinorRank) {
                        div.classList.add('text-blue-500', 'font-bold', 'bg-gray-50');
                    } else {
                        div.classList.add('text-gray-700');
                    }
                    div.dataset.rank = rank;
                    div.innerText = rank;
                    div.onclick = () => {
                        selectedMinorRank = rank;
                        renderMinorRankList();
                    };
                    list.appendChild(div);
                });
            }
        }

        function openRankModal(row) {
            currentRankRow = row;
            document.getElementById('rank-modal').classList.remove('translate-y-full');
            document.getElementById('rank-modal-mask').classList.remove('hidden');
            renderMajorRankList();
            renderMinorRankList();
        }

        function closeRankModal() {
            document.getElementById('rank-modal').classList.add('translate-y-full');
            document.getElementById('rank-modal-mask').classList.add('hidden');
        }

        document.getElementById('rank-cancel').onclick = closeRankModal;
        document.getElementById('rank-modal-mask').onclick = closeRankModal;
        document.getElementById('rank-confirm').onclick = function() {
            let value = selectedMajorRank;
            if(minorRanks[selectedMajorRank].length > 0) {
                value += ' ' + selectedMinorRank;
            }
            if(currentRankRow === 'initial') {
                document.getElementById('initial-rank-value').innerText = value;
                document.getElementById('initial-rank-value').classList.remove('text-gray-400');
                document.getElementById('initial-rank-value').classList.add('text-gray-700');
            } else if(currentRankRow === 'target') {
                document.getElementById('target-rank-value').innerText = value;
                document.getElementById('target-rank-value').classList.remove('text-gray-400');
                document.getElementById('target-rank-value').classList.add('text-gray-700');
            }
            closeRankModal();
        };

        document.getElementById('initial-rank-row').onclick = function() { openRankModal('initial'); };
        document.getElementById('target-rank-row').onclick = function() { openRankModal('target'); };

        // 输入订单标题弹窗逻辑
        let orderTitleValue = '';
        const orderTitleModal = document.getElementById('order-title-modal');
        const orderTitleMask = document.getElementById('order-title-modal-mask');
        const orderTitleTextarea = document.getElementById('order-title-textarea');
        const orderTitleCount = document.getElementById('order-title-count');
        const orderTitleConfirm = document.getElementById('order-title-confirm');
        function openOrderTitleModal() {
            orderTitleModal.classList.remove('scale-0', 'hidden');
            orderTitleModal.classList.add('scale-100');
            orderTitleMask.classList.remove('hidden');
            orderTitleTextarea.value = orderTitleValue;
            orderTitleCount.innerText = orderTitleValue.length;
            orderTitleConfirm.disabled = !orderTitleValue || orderTitleValue.length > 100;
            setTimeout(() => { orderTitleTextarea.focus(); }, 100);
        }
        function closeOrderTitleModal() {
            orderTitleModal.classList.remove('scale-100');
            orderTitleModal.classList.add('scale-0', 'hidden');
            orderTitleMask.classList.add('hidden');
        }
        orderTitleTextarea.oninput = function() {
            let val = orderTitleTextarea.value;
            if(val.length > 100) {
                val = val.slice(0, 100);
                orderTitleTextarea.value = val;
            }
            orderTitleCount.innerText = val.length;
            orderTitleConfirm.disabled = !val || val.length > 100;
        };
        document.getElementById('order-title-cancel').onclick = closeOrderTitleModal;
        orderTitleMask.onclick = closeOrderTitleModal;
        document.getElementById('order-title-confirm').onclick = function() {
            orderTitleValue = orderTitleTextarea.value;
            document.getElementById('order-title-value').innerText = orderTitleValue;
            document.getElementById('order-title-value').classList.remove('text-gray-400');
            document.getElementById('order-title-value').classList.add('text-gray-700');
            closeOrderTitleModal();
        };
        document.getElementById('order-title-row').onclick = openOrderTitleModal;

        // 安全保证金说明弹窗逻辑
        const safeDepositModal = document.getElementById('safe-deposit-modal');
        const safeDepositMask = document.getElementById('safe-deposit-modal-mask');
        function openSafeDepositModal() {
            safeDepositModal.classList.remove('scale-0', 'hidden');
            safeDepositModal.classList.add('scale-100');
            safeDepositMask.classList.remove('hidden');
        }
        function closeSafeDepositModal() {
            safeDepositModal.classList.remove('scale-100');
            safeDepositModal.classList.add('scale-0', 'hidden');
            safeDepositMask.classList.add('hidden');
        }
        document.getElementById('safe-deposit-confirm').onclick = closeSafeDepositModal;
        safeDepositMask.onclick = closeSafeDepositModal;
        // 绑定问号按钮（你需要在安全保证金行的问号按钮加id="safe-deposit-help"）
        const safeDepositHelp = document.getElementById('safe-deposit-help');
        if(safeDepositHelp) safeDepositHelp.onclick = openSafeDepositModal;

        // 效率保证金说明弹窗逻辑
        const efficiencyDepositModal = document.getElementById('efficiency-deposit-modal');
        const efficiencyDepositMask = document.getElementById('efficiency-deposit-modal-mask');
        function openEfficiencyDepositModal() {
            efficiencyDepositModal.classList.remove('scale-0', 'hidden');
            efficiencyDepositModal.classList.add('scale-100');
            efficiencyDepositMask.classList.remove('hidden');
        }
        function closeEfficiencyDepositModal() {
            efficiencyDepositModal.classList.remove('scale-100');
            efficiencyDepositModal.classList.add('scale-0', 'hidden');
            efficiencyDepositMask.classList.add('hidden');
        }
        document.getElementById('efficiency-deposit-confirm').onclick = closeEfficiencyDepositModal;
        efficiencyDepositMask.onclick = closeEfficiencyDepositModal;
        // 绑定问号按钮（你需要在效率保证金行的问号按钮加id="efficiency-deposit-help"）
        const efficiencyDepositHelp = document.getElementById('efficiency-deposit-help');
        if(efficiencyDepositHelp) efficiencyDepositHelp.onclick = openEfficiencyDepositModal;

        // ====== 发单提醒弹窗逻辑 ======
        // 插入弹窗和遮罩层
        const phoneScreen = document.querySelector('.phone-screen');
        const orderAlertMask = document.createElement('div');
        orderAlertMask.id = 'order-alert-mask';
        orderAlertMask.className = 'absolute inset-0 bg-black bg-opacity-30 z-50 hidden';
        const orderAlertModal = document.createElement('div');
        orderAlertModal.id = 'order-alert-modal';
        orderAlertModal.className = 'absolute left-1/2 top-1/2 z-50 flex flex-col transition-transform duration-300 scale-0 hidden';
        orderAlertModal.style = 'width: 340px; max-width: 92vw; border-radius: 20px; background: #fff; box-shadow: 0 4px 24px rgba(0,0,0,0.12); transform: translate(-50%, -50%);';
        orderAlertModal.innerHTML = `
            <div class="flex items-center px-6 pt-6 pb-1">
                <span class="text-blue-500 font-bold text-xl">发单提醒</span>
            </div>
            <div class="px-6 pt-1 pb-2 text-gray-700 text-base leading-relaxed text-left" style="white-space: pre-line;">
· 关注订单消息，及时对订单异常问题进行处理。
· 请留意订单状态，接单者提交验收后，根据打手等级，系统将在3-96小时内对订单自动验收。
· 订单完结后及时顶号更改密码，避免造成不必要的损失。
· 不要给打手提供趣代练登录验证码和腾讯人脸识别验证码。
            </div>
            <div class="flex items-center px-6 py-2">
                <input type="checkbox" id="order-alert-check" class="form-checkbox w-5 h-5 accent-blue-500 checked:bg-blue-500 checked:border-blue-500 border-blue-400 focus:ring-blue-500 rounded" checked>
                <label for="order-alert-check" class="ml-2 text-gray-700 text-sm">
                    我已阅读并同意
                    <a href="#" class="text-blue-500 underline">《趣代练发单协议》</a>
                </label>
            </div>
            <div class="flex justify-between items-center px-6 pb-6 pt-2">
                <button id="order-alert-cancel" class="w-28 h-10 rounded-full border border-gray-300 text-gray-700 bg-white text-base font-bold">取消</button>
                <button id="order-alert-confirm" class="w-28 h-10 rounded-full bg-gradient-to-r from-blue-400 to-blue-500 text-white text-base font-bold">确定</button>
            </div>
        `;
        // 插入到.bottom-nav之前
        const bottomNav = document.querySelector('.bottom-nav');
        phoneScreen.insertBefore(orderAlertMask, bottomNav);
        phoneScreen.insertBefore(orderAlertModal, bottomNav);

        // 交互逻辑
        const confirmOrderBtn = document.querySelector('.bg-blue-500.text-white'); // "确认发单"按钮
        function openOrderAlertModal() {
            orderAlertModal.classList.remove('scale-0', 'hidden');
            orderAlertModal.classList.add('scale-100');
            orderAlertMask.classList.remove('hidden');
        }
        function closeOrderAlertModal() {
            orderAlertModal.classList.remove('scale-100');
            orderAlertModal.classList.add('scale-0', 'hidden');
            orderAlertMask.classList.add('hidden');
        }
        confirmOrderBtn.onclick = function(e) {
            e.preventDefault();
            openOrderAlertModal();
        };
        orderAlertMask.onclick = closeOrderAlertModal;
        orderAlertModal.querySelector('#order-alert-cancel').onclick = closeOrderAlertModal;
        orderAlertModal.querySelector('#order-alert-confirm').onclick = closeOrderAlertModal;

        // 跳转函数（根据实际路由或页面切换逻辑调整）
        function goToSendOrder() {
            // 隐藏发单成功页，显示发单页
            document.getElementById('order-success-page').classList.add('hidden');
            // 可补充显示发单主页面的逻辑
        }
        function goToOrderPage() {
            // 跳转到订单页，或切换tab
            // 示例：window.location.href = '/order';
            alert('跳转到订单页（请根据实际小程序/SPA路由实现）');
        }
    });
    </script>
</body>
</html> 